<template>
  <div
    ref="customForm"
    class="custom-van-input custom-form-container"
  >
    <CustomVanField
      :error-message="errorMessage"
      :label="label"
      :required="required"
      :is-error-message="isErrorMessage"
    >
      <van-field
        v-model="inputValue"
        :placeholder="placeholder || `请输入${label}`"
        :disabled="canDo"
        :style="bG"
        @input="onInput"
        @blur="onBlur"
      />
    </CustomVanField>
    <template
      v-if="remote && false"
    >
      <!--  scroll-container--bottom -->
      <div
        v-show="remoteShow"
        v-clickoutside="handleClickOutside"
        class="remote-container"
      >
        <better-scroll
          ref="BS"
          class="scroll-container"
          :data="remoteList"
        >
          <p
            v-for="re in remoteList"
            :key="re"
            class="message text-ellipsis"
            @click="setRemoteValue(re)"
            v-text="re"
          />
        </better-scroll>
      </div>
    </template>
  </div>
</template>

<script>
import clickoutside from '@/utils/directives/clickoutside';
import BS from '@/utils/mixins/BS';
import remote from '../mixins/remote/input';
import collect from '../mixins/collect/input';
import field from '../mixins/field';
import model from '../mixins/model';
import rule from '../mixins/rule';
import disabled from '../mixins/setting/disabled';

export default {
  name: 'CustomVanInput',

  directives: {
    clickoutside
  },

  mixins: [field, model(), remote, rule, collect, disabled, BS]
};
</script>

<style lang="scss" scoped>
$remoteHeight: 130px;
.custom-van-input {
  position: relative;
  .remote-container:before {
    content: '';
    border: 10px solid transparent;
    position: absolute;
    color: #fff;
  }
  .scroll-container--bottom {
    border-top-width: 1px!important;
    border-bottom-width: 0!important;
    border-top-left-radius: $b-radius-xs!important;
    border-top-right-radius: $b-radius-xs!important;
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important;
    bottom: 46px!important;
  }
  .remote-container {
    width: 100%;
    position: absolute;
    max-height: $remoteHeight;
    bottom: 0;
    transform: translateY(100%);
    left: 0;
    background-color: $white-1;
    border: 1px solid $gray-1;
    border-top-width: 0;
    border-bottom-left-radius: $b-radius-xs;
    border-bottom-right-radius: $b-radius-xs;
    z-index: 99;
    box-sizing: border-box;
    .message {
      line-height: 36px;
      padding: 0 $padding-sm;
      color: $gray-3;
    }
    .message:active {
      background-color: $gray-1;
    }
  }
}
</style>
